import { Layout, Menu, Typography, Button } from 'antd'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { LogoutOutlined } from '@ant-design/icons'
import { useMemo } from 'react'
import { useAuth } from '@store/AuthProvider'
import { ROUTES } from '@router/paths'
import styles from './AppLayout.module.css'

const { Header, Sider, Content, Footer } = Layout

const AppLayout = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const { user, logout } = useAuth()

  const selectedKeys = useMemo(() => {
    if (location.pathname.startsWith(ROUTES.dashboard)) {
      return [ROUTES.dashboard]
    }
    return []
  }, [location.pathname])

  const menuItems = [
    {
      key: ROUTES.dashboard,
      label: '仪表盘',
      onClick: () => navigate(ROUTES.dashboard),
    },
  ]

  return (
    <Layout className={styles.root}>
      <Sider breakpoint="lg" collapsedWidth="0">
        <div className={styles.siderLogo}>ADMIN</div>
        <Menu theme="dark" selectedKeys={selectedKeys} items={menuItems} className={styles.menu} />
      </Sider>

      <Layout className={styles.layout}>
        <Header className={styles.header}>
          <Typography.Title level={4} className={styles.headerTitle}>
            React 企业后台管理系统
          </Typography.Title>

          {user ? (
            <div className={styles.userSection}>
              <Typography.Text className={styles.userName}>{user.name}</Typography.Text>
              <Button icon={<LogoutOutlined />} onClick={() => logout()}>
                退出
              </Button>
            </div>
          ) : null}
        </Header>

        <Content className={styles.content}>
          <div className={styles.contentInner}>
            <Outlet />
          </div>
        </Content>

        <Footer className={styles.footer}>
          React Admin Starter ©{new Date().getFullYear()} Powered by Vite · React · Ant Design
        </Footer>
      </Layout>
    </Layout>
  )
}

export default AppLayout


